<script setup>
import {ref} from 'vue'
import Rate from './Rate.vue'
  
  let maxRate = ref(5)
  let rate = ref(3)

  let extraMsg = ref('Extra Message')
</script>

<template>
  <h3>在组件上使用v-model - 绑定多个时可以用传参数来实现</h3>
  <div>( 当前rate是 {{rate}}, extraMsg是 {{extraMsg}} )</div>
  <button @click="maxRate++">rate数量加一</button>
  <br>
  <br>

  <Rate v-model="rate" v-model:extraMsg="extraMsg" :maxRate="maxRate"></Rate>
  <br>

  <p>
    说明:<br>
    &nbsp;&nbsp;自定义事件可以用于创建支持 <b>v-model</b> 的自定义输入组件。<br>
    使用步骤:<br>
    1. 组件定义名为 <b>modelValue</b> 的属性(prop).<br>
    2. 组件中触发更新事件时调用 <b>emit</b> 发送自定义事件 <b>update:modelValue</b> ,可以带参数.<br>
    3. 如果想绑定多个属性(<b>多值双向绑定</b>),则可以给 <b>v-model</b> 添加参数,比如 <b>v-model:message</b> .类似地, 触发更新事件时给 <b>update</b> 指定新的参数,比如 <b>update:message</b> .<br>
    官方文档: <a href="https://v3.cn.vuejs.org/guide/component-basics.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model"><b>在组件上使用v-model</b></a>
    &nbsp;,&nbsp;<a href="https://v3.cn.vuejs.org/guide/migration/v-model.html#v-model-%E5%8F%82%E6%95%B0"><b>v-model参数</b></a>
  </p>

</template>

<style scoped>

button {
  margin-top: 10px;
}

</style>